<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex manufacturerDetails_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub manufacturerDetails_fd0_0'>
          <view class='flex flex-wrap align-center manufacturerDetails_fd0_0_c0' @tap.stop="handleJumpDiy"
            data-type="back" data-url="1">
            <text class='fu-iconfont2  manufacturerDetails_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='manufacturerDetails_fd0_0_c1_c0'>厂家详情</text>
          </view>
          <view class='flex flex-wrap align-center justify-end manufacturerDetails_fd0_0_c0'>
            <image class='manufacturerDetails_fd0_0_c2_c0' mode="aspectFit" :src='STATIC_URL+"7.png"'></image>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout manufacturerDetails_flex_1">
        <view class='flex flex-wrap align-center justify-between manufacturerDetails_fd1_0'>
          <text class='manufacturerDetails_fd1_0_c0'>{{info.firm_mingcheng}}</text>
          <text class='manufacturerDetails_fd1_0_c1'>{{info.chengshi_area}}</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout manufacturerDetails_flex_2">
        <view v-for="(item,index) in list" :key="index"
          class='flex flex-direction flex-wrap align-stretch manufacturerDetails_fd2_0'>
          <view class='flex flex-wrap align-center'>
            <text class='manufacturerDetails_fd2_0_c0_c0'>收购品种</text>
            <text class='manufacturerDetails_fd2_0_c0_c1'>{{item.firmkind_mingcheng}}</text>
          </view>
          <view class='flex flex-wrap align-center manufacturerDetails_fd2_0_c1'>
            <text class='manufacturerDetails_fd2_0_c0_c0'>收购价格</text>
            <text class='manufacturerDetails_fd2_0_c0_c1'>{{item.shougoujiage}}</text>
            <text class='manufacturerDetails_fd2_0_c1_c2'>{{item.create_time}}</text>
          </view>
          <view class='flex flex-wrap align-center manufacturerDetails_fd2_0_c1'>
            <text class='manufacturerDetails_fd2_0_c0_c0'>收购标准</text>
            <text class='manufacturerDetails_fd2_0_c0_c1'>{{item.shougoubiaozhun}}</text>
          </view>
        </view>
        <view class='flex flex-direction flex-wrap align-center manufacturerDetails_fd2_2'>
          <view class=" manufacturerDetails_fd2_2_c0">
            <!--      <qiun-data-charts :canvas2d='true' :reshow='true' :ontouch='true' chart-type='1' type='column'
              :opts='chartsOptsfd2_2_c0' /> -->
            <view class="margin-bottom-sm text-333 text-weight-600 text-lg">一周价格走势</view>
            <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" :tooltipShow="false" />
            <!-- <view class="charts-box" style="height: 400rpx;width:500rpx;margin:20rpx auto 0 auto">
                  <canvas canvas-id="WvpIxulXgLNnqmAtUxFkdMKmeYqcnOTy" id="WvpIxulXgLNnqmAtUxFkdMKmeYqcnOTy" class="charts"
                @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" />
              <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
            </view> -->
          </view>
        </view>
        <view class='flex flex-wrap align-center'>
          <!-- <text class='manufacturerDetails_fd2_3_c0'>厂家入驻</text> -->
        </view>
        <view class='flex flex-wrap align-center justify-between manufacturerDetails_fd2_4'>
          <view class='flex flex-wrap align-center justify-center manufacturerDetails_fd2_4_c0'
            @tap.stop="memberFunc('1')" v-if="info.duijiejiehuorendianhua">
            <image class='manufacturerDetails_fd2_4_c0_c0' mode="aspectFit" :src='STATIC_URL+"62.png"'></image>
            <text class='manufacturerDetails_fd2_4_c0_c1'>对接接货人</text>
          </view>
          <view class='flex flex-wrap align-center justify-center manufacturerDetails_fd2_4_c1'
            @tap.stop="memberFunc('2')" v-if="info.duijiechangjiadianhua">
            <image class='manufacturerDetails_fd2_4_c0_c0' mode="aspectFit" :src='STATIC_URL+"62.png"'></image>
            <text class='manufacturerDetails_fd2_4_c1_c1'>对接厂家</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1706622675020" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout manufacturerDetails_flex_3">
          <view class='flex flex-direction flex-wrap align-stretch manufacturerDetails_fd3_0'>
            <view class='flex flex-wrap align-center justify-between manufacturerDetails_fd3_0_c0'>
              <view class='flex flex-wrap align-center manufacturerDetails_fd3_0_c0_c0'>
              </view>
              <text class='manufacturerDetails_fd3_0_c0_c1'>友情提示</text>
              <image class='manufacturerDetails_fd3_0_c0_c2' mode="aspectFit" :src='STATIC_URL+"138.png"'
                @tap.stop="popupShow1706622675020=false"></image>
            </view>
            <view class='flex flex-wrap align-center justify-center manufacturerDetails_fd3_0_c1'>
              <text class='manufacturerDetails_fd3_0_c1_c0'>厂家工作时间为7:00～19:00，
                请于该时间段拨打电话。</text>
            </view>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>
      <benben-popup v-model="popupShow1706621996373" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout manufacturerDetails_flex_4">
          <view class='flex flex-direction flex-wrap align-center manufacturerDetails_fd4_0'>
            <text class='manufacturerDetails_fd4_0_c0'>会员专享</text>
            <text class='manufacturerDetails_fd4_0_c1'>加入会员，解锁全部功能<br /> 买卖更快，客户更多行情更全</text>
            <button class='manufacturerDetails_fd4_0_c2' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/wode/rurchaseMembership/rurchaseMembership`">立即加入</button>
          </view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>


    </view>
  </view>
</template>
<script>
  import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
  var uChartsInstance = {};
  export default {
    components: {},


    data() {
      return {
        "popupShow1706621996373": false,
        "popupShow1706622675020": false,
        "chartsOptsfd2_2_c0": {
          "extra": {
            "column": {
              "type": "stack"
            }
          }
        },
        "is_vip": false,
        "aid": "",
        info: "",
        list: [],
        chartData: {},
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 15, 15, 15],
          enableScroll: false,
          dataLabel: true,
          dataPointShape: false,
          legend: {},
          xAxis: {
            disableGrid: true
          },
          yAxis: {
            gridType: "dash",
            dashLength: 1,
            "max": 0,
            "unit": "",
            "min": 0,
            "tofix": 2,
          },
          extra: {
            line: {
              type: "straight",
              width: 2,
              activeType: "hollow",
            }
          }
        }
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        aid
      } = options
      if (aid !== undefined) this.aid = aid
      this.getDetail()
      this.getTj()
    },
    onUnload() {

    },
    onReady() {
      //这里的 750 对应 css .charts 的 width
      this.cWidth = uni.upx2px(650);
      //这里的 500 对应 css .charts 的 height
      this.cHeight = uni.upx2px(432);
    },
    onShow() {
      this.$api.post(global.apiUrls.post5c78c4772da97, {}).then(res => {
        if (res.data.code == 1) {
          this.is_vip = res.data.data.is_vip

        }
      })
    },
    onHide() {
      this.popupShow1706621996373 = false
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      getUser() {
        this.$api.post(global.apiUrls.post6572cc3c7ea2c, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.info = res.data.data[0]
            this.list = res.data.data
          }
        })
      },
      getTj() {
        this.$api.post(global.apiUrls.post65d857222a383, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            // this.drawCharts('WvpIxulXgLNnqmAtUxFkdMKmeYqcnOTy', res.data.data, false);
            this.infos = res.data.data
            console.log('res.data.data', res.data.data)
            // this.opts.xAxis.itemCount = this.infos.series[0]['data'].length
            this.opts.xAxis.labelCount = 4
            this.opts.yAxis.splitNumber = 6
            this.opts.yAxis.min = this.infos.min[0]
            this.opts.yAxis.max = this.infos.max[0]

            let res2 = {
              categories: this.infos.categories,
              series: this.infos.series
            };
            this.chartData = JSON.parse(JSON.stringify(res2));
          }
        })
      },
      getDetail() {
        this.$api.post(global.apiUrls.post6572cc3c7ea2c, {
          aid: this.aid
        }).then(res => {
          if (res.data.code == 1) {
            this.info = res.data.data[0]
            this.list = res.data.data
          }
        })
      },
      //是否是会员
      memberFunc(type) {
        if (!this.is_vip) {
          this.popupShow1706621996373 = true;
          return
        }
        if (type == 1) {
          if (!this.info.duijiejiehuorendianhua) {
            return;
          }
          this.callMobile(this.info.duijiejiehuorendianhua)
        } else {
          if (!this.info.duijiechangjiadianhua) {
            return;
          }
          this.callMobile(this.info.duijiechangjiadianhua)
        }
      },
      //充值会员
      rechargeMembershipFunc() {
        this.popupShow1706621996373 = false;
        this.$urouter.navigateTo(`/pages/wode/rurchaseMembership/rurchaseMembership`);
      },
      // 统计图
      touchstart(e) {
        uChartsInstance[e.target.id].scrollStart(e);
      },
      touchmove(e) {
        uChartsInstance[e.target.id].scroll(e);
      },
      touchend(e) {
        uChartsInstance[e.target.id].scrollEnd(e);
        uChartsInstance[e.target.id].touchLegend(e);
        uChartsInstance[e.target.id].showToolTip(e);
      },
      drawCharts(id, data, dataLabel) {
        console.log('res', data)
        const ctx = uni.createCanvasContext(id, this);
        uChartsInstance[id] = new uCharts({
          type: "line",
          context: ctx,
          width: this.cWidth,
          height: this.cHeight,
          categories: data.categories,
          series: data.series,
          animation: true,
          timing: "easeOut",
          duration: 1000,
          rotate: false,
          rotateLock: false,
          background: "#FFFFFF",
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
            "#ea7ccc"
          ],
          padding: [15, 10, 0, 15],
          fontSize: 13,
          fontColor: "#333333",
          dataLabel: dataLabel,
          dataPointShape: true,
          dataPointShapeType: "solid",
          touchMoveLimit: 60,
          enableScroll: true,
          enableMarkLine: false,
          legend: {
            show: true,
            position: "bottom",
            float: "center",
            padding: 5,
            margin: 5,
            backgroundColor: "rgba(0,0,0,0)",
            borderColor: "rgba(0,0,0,0)",
            borderWidth: 0,
            fontSize: 13,
            fontColor: "#333333",
            lineHeight: 11,
            hiddenColor: "#CECECE",
            itemGap: 10
          },
          xAxis: {
            disableGrid: false,
            disabled: false,
            axisLine: false,
            axisLineColor: "#CCCCCC",
            calibration: false,
            fontColor: "#333333",
            fontSize: 13,
            lineHeight: 20,
            marginTop: 0,
            rotateLabel: false,
            rotateAngle: 45,
            itemCount: 5,
            boundaryGap: "center",
            splitNumber: 5,
            gridColor: "#FFFFFF",
            gridType: "solid",
            dashLength: 4,
            gridEval: 1,
            scrollShow: false,
            scrollAlign: "right",
            scrollColor: "#FFFFFF",
            scrollBackgroundColor: "#FFFFFF",
            title: "",
            titleFontSize: 13,
            titleOffsetY: 0,
            titleOffsetX: 0,
            titleFontColor: "#333333",
            formatter: "",
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2,
            disabled: false,
            disableGrid: false,
            splitNumber: 5,
            gridColor: "#CCCCCC",
            padding: 10,
            showTitle: false,
            data: []
          },
          extra: {
            line: {
              type: "straight",
              width: 2,
              activeType: "hollow",
              linearType: "none",
              onShadow: false,
              animation: "vertical"
            },
            tooltip: {
              showBox: false,
              showArrow: false,
              showCategory: false,
              borderWidth: 0,
              borderRadius: 0,
              borderColor: "#666666",
              borderOpacity: 0.7,
              bgColor: "#FFFFFF",
              bgOpacity: 0.7,
              gridType: "solid",
              dashLength: 4,
              gridColor: "#666666",
              boxPadding: 3,
              fontSize: 13,
              lineHeight: 20,
              fontColor: "#333333",
              legendShow: false,
              legendShape: "auto",
              splitLine: true,
              horizentalLine: false,
              xAxisLabel: false,
              yAxisLabel: false,
              labelBgColor: "#FFFFFF",
              labelBgOpacity: 0.7,
              labelFontColor: "#666666"
            },
            markLine: {
              type: "solid",
              dashLength: 0,
              data: []
            }
          }
        });
      },
      // endddddddddddd
    }
  };
</script>
<style lang="scss" scoped>
  .charts {
    width: 650rpx;
    height: 432rpx;
    margin-left: -32rpx;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(248, 248, 250, 1);
    background-size: 100% auto;
  }

  .manufacturerDetails_flex_0 {
    background: rgba(255, 255, 255, 1);
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto;
  }

  .manufacturerDetails_fd0_0_c2_c0 {
    width: 119rpx;
    height: 55rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .manufacturerDetails_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .manufacturerDetails_fd0_0_c0 {
    width: 120rpx;
  }

  .manufacturerDetails_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .manufacturerDetails_flex_1 {
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .manufacturerDetails_fd1_0_c1 {
    color: #999999;
    font-size: 26rpx;
    font-weight: 500;
    line-height: 34rpx;
  }

  .manufacturerDetails_fd1_0_c0 {
    color: #2568AE;
    font-size: 40rpx;
    font-weight: 400;
    line-height: 49rpx;
  }

  .manufacturerDetails_fd1_0 {
    padding: 21rpx 30rpx 21rpx 30rpx;
  }

  .manufacturerDetails_flex_2 {
    padding: 24rpx 30rpx 40rpx 30rpx;
  }

  .manufacturerDetails_fd2_4_c1_c1 {
    color: #956143;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .manufacturerDetails_fd2_4_c1 {
    background: linear-gradient(90deg, #F3E0C7 0%, #F2C49D 100%);
    width: 333rpx;
    height: 80rpx;
    border-radius: 24rpx;
    background-size: 100% auto;
    position: relative;
  }

  .manufacturerDetails_fd2_4_c0_c1 {
    color: #624314;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .manufacturerDetails_fd2_4_c0_c0 {
    width: 72rpx;
    height: 29rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
    z-index: 1;
  }

  .manufacturerDetails_fd2_4_c0 {
    background: linear-gradient(90deg, #FBEBCC 0%, #F8D48F 100%);
    width: 333rpx;
    height: 80rpx;
    border-radius: 24rpx;
    background-size: 100% auto;
    position: relative;
  }

  .manufacturerDetails_fd2_4 {
    margin: 44rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd2_3_c0 {
    color: #101010;
    font-size: 36rpx;
    font-weight: 700;
    line-height: 42rpx;
  }

  .manufacturerDetails_fd2_2_c0 {
    width: 619rpx;
    height: 450rpx;
  }

  .manufacturerDetails_fd2_2 {
    background: rgba(255, 255, 255, 1);
    margin: 0rpx 0rpx 24rpx 0rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 24rpx 0 24rpx 0;
  }

  .manufacturerDetails_fd2_0_c1_c2 {
    margin: 0rpx 0rpx 0rpx auto;
    color: #2568AE;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 46rpx;
  }

  .manufacturerDetails_fd2_0_c1 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd2_0_c0_c1 {
    color: #101010;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 46rpx;
  }

  .manufacturerDetails_fd2_0_c0_c0 {
    color: #666666;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 46rpx;
    margin: 0rpx 40rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd2_0 {
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
    border-radius: 16rpx;
    padding: 32rpx 24rpx 32rpx 24rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .manufacturerDetails_flex_3 {
    background: rgba(255, 255, 255, 1);
    width: 540rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .manufacturerDetails_fd3_0_c1_c0 {
    color: #333333;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 52rpx;
  }

  .manufacturerDetails_fd3_0_c1 {
    margin: 32rpx 0rpx 0rpx 0rpx;
    text-align: center;
  }

  .manufacturerDetails_fd3_0_c0_c2 {
    width: 26rpx;
    height: 26rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd3_0_c0_c1 {
    color: #101010;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .manufacturerDetails_fd3_0_c0_c0 {
    width: 26rpx;
    height: 26rpx;
  }

  .manufacturerDetails_fd3_0_c0 {
    padding: 0rpx 24rpx 0rpx 24rpx;
  }

  .manufacturerDetails_fd3_0 {
    padding: 40rpx 0rpx 40rpx 0rpx;
  }

  .manufacturerDetails_flex_4 {
    background: rgba(255, 255, 255, 1);
    width: 540rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
  }

  .manufacturerDetails_fd4_0_c2 {
    background: rgba(37, 104, 174, 1);
    border-radius: 100rpx;
    width: 379rpx;
    line-height: 80rpx;
    font-size: 34rpx;
    color: #fff;
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd4_0_c1 {
    color: #333333;
    font-size: 30rpx;
    font-weight: 400;
    line-height: 52rpx;
    text-align: center;
    margin: 22rpx 0rpx 0rpx 0rpx;
  }

  .manufacturerDetails_fd4_0_c0 {
    color: #101010;
    font-size: 32rpx;
    font-weight: 500;
    line-height: 32rpx;
  }

  .manufacturerDetails_fd4_0 {
    padding: 40rpx 0rpx 40rpx 0rpx;
  }
</style>
